<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询案例</title>
</head>
<style>
    /* 媒体查询一半按照从大到小或者是从小到大的顺序来 */
    /* 从小到大写代码会更简洁，利用率CSS代码的层叠性质 */
    /* 小于540px时页面背景变为蓝色 */
    /* screen 和 and 是不可省略的  */
    /* 数字后面必须跟上单位 */
    @media screen and (max-width:539px) {
        body {
            background-color: blue
        }
    }

    /* 大于540px小于970px时页面背景变为绿色 */
    /* @media screen and (min-width:540px) and (max-width:969px) {
        body {
            background-color: green;
        }
    } */

    @media screen and (min-width:540px) {
        body {
            background-color: green;
        }
    }

    /* 大于970px时页面背景变为红色 */
    @media screen and (min-width:970px) {
        body {
            background-color: red;
        }
    }
</style>

<body>

</body>

</html>